<template>
  <div class="app-container">
    <p>Right Answer</p>
    <div id="wave"></div>
    <button @click="play1">play</button>
    
    
      <p>your wave</p>
      <!-- <div id="mywave"></div>
    <button @click="play2">播放</button> -->
   
    <button @click="next">next</button>
  </div>
</template>
<script>
import { defineComponent, onMounted, reactive, toRefs, ref } from "vue";
import router from "../../router";
import AnswerList from "../../assets/answerList.json";
import { localGet } from "../../utils";
export default defineComponent({
  setup() {
    const state = reactive({
      wavesurfer: null,
      mywave: null,
    });
    onMounted(() => {
      loadWave();
    });
    const loadWave = () => {
      let array=localGet("questionList")
      let current=window.localStorage.getItem("dataItem")
      let o=array[current]
      let result = JSON.parse(window.localStorage.getItem("waveResult"));
      state.wavesurfer = WaveSurfer.create({
        container: "#wave",
        waveColor: "violet",
        progressColor: "purple",
      });
      state.wavesurfer.load(o.fileUrl);
      state.mywave = WaveSurfer.create({
        container: "#mywave",
        waveColor: "violet",
        progressColor: "purple",
      });
      state.mywave.load(
        `/sound/download/${window.localStorage.getItem("fileName")}`
      );
    };
    const play1 = () => {
      state.wavesurfer.play();
    };
    const play2 = () => {
      state.mywave.play();
    };
    const next = () => {
      let count = Number(window.localStorage.getItem("dataItem"))+1;
      console.log(count)
      if ( count>19) {
        router.push("/speakinganswer");
      } else {
        window.localStorage.setItem("dataItem", count);
        router.push("/home");
      }
    };
    return {
      loadWave,
      play1,
      play2,
      next
    };
  },
});
</script>
<style scoped>
#wave {
  width: 300px;
  height: 300px;
}
#mywave {
  width: 300px;
  height: 300px;
}
</style>
